<template>
  <div>
    <div class="roder-details">
      <div class="info">
        <h3 class="title">返修/重做参数</h3>
        <div class="list">
          <div class="list-div">
            <div>
              <p>返修原因</p>
              <span>{{afterreason}}</span>
            </div>

          </div>

          <div style="margin-top: 30px;margin-left: 30px;">
            <img :src="this.afterimg" width="100px" height="100px" data-action="zoom"> </img>
          </div>
        </div>

        <h4 class="title2">返修参数</h4>
        <div class="list">
          <div class="list-div">
            <div>
              <p>产品名称</p>
              <span>{{productName}}</span>
            </div>
          </div>
          <div class="list-div">

            <div v-for="(item,i) in fanxiuParameter">
              <p>{{item.bodySizename}}</p>
              <span>{{item.bodysizeValue}}</span>
            </div>

          </div>
        </div>

        <div class="btns" style="justify-content: flex-start;">
          <a class="b1" style="width:90px;margin-top: 20px;margin-right: 20px;">导出</a>
          <a class="b3" @click="goback" style="width:90px;margin-top: 20px;">返回</a>
        </div>

      </div>
    </div>

  </div>
</template>

<script>


  // @ is an alias to /src
  import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
  import {getAction} from "../../api/manage";

  export default {
    name: 'teamAfteronepersonDetail',
    data() {
      return {
        afterimg: '',
        productName: '',
        afterreason: '',
        fanxiuParameter: [],
        url: {
          detail: '/orderAfter/getteamAfteronepersonDetail' // 产品详情
        },
        locale,

      }
    },
    created() {
      this.getDetail()
    },
    methods: {
      // 获取产品详情
      getDetail() {
        getAction(this.url.detail, {
          'afterCode': this.$route.query.afterCode,
          'customerId': this.$route.query.customerId,
          'isAfter': 1
        }).then(res => {
          this.afterreason = res.data.msg.remark;
          this.productName = res.data.msg.productName;
          this.afterimg = res.data.msg.afterimg;
          this.fanxiuParameter = res.data;

        })
      },
      // 返回上一个界面
      goback() {
        this.$router.go(-1)
      },
      selectTab: function (dataStr, i) {
        this[dataStr] = i
      }
    },
    mounted() {
      // 切换页面时滚动条自动滚动到顶部
      window.scrollTo(0, 0);
    }
  }
</script>

<style scoped lang="less">
  .roder-details {
    width: 80%;
    margin: 0 auto;
    background: #fff;
    margin-top: 20px;
    padding: 20px 35px;


    .btns {
      display: flex;
      justify-content: space-between;
      height: 36px;
      align-items: center;
      margin-bottom: 50px;

      div {
        display: flex;
      }

      a.b1 {
        background-color: #393939;
        width: 122px;
        height: 36px;
        color: rgb(255, 238, 58);
        font-size: 15px;
        line-height: 36px;
        text-align: center;
        display: block;
        border-radius: 3px;
      }

      a.b2 {
        background-color: #393939;
        width: 90px;
        height: 36px;
        color: #fff;
        font-size: 15px;
        line-height: 36px;
        text-align: center;
        display: block;
      }

      a.b3 {
        background-color: rgba(242, 242, 242, 1);
        width: 90px;
        height: 36px;
        color: #444;
        font-size: 15px;
        line-height: 36px;
        text-align: center;
        display: block;
      }
    }

    .info {
      padding-top: 30px;

      .inputs {
        div {
          display: flex;
          margin-bottom: 10px;

          p {
            width: 112px;
            padding: 2px 2px 2px 24px;
            background-color: rgba(249, 249, 249, 1);
            font-size: 15px;
            color: #333;
            display: flex;
            height: 36px;
            align-items: center;
            margin: 0px !important;
          }

          span {
            width: 114px;
            padding: 2px 2px 2px 24px;
            background-color: rgba(255, 255, 255, 1);
            font-size: 15px;
            color: #333;
            display: flex;
            font-weight: 100;
            height: 36px;
            align-items: center;
            margin-left: 3px;
            border-width: 1px;
            border-style: solid;
            cursor: pointer;
            border-color: rgba(242, 242, 242, 1);

            &:hover {
              font-weight: 600;
              color: #fff;
              background-color: rgba(159, 159, 159, 1);
            }
          }

          b {
            width: 61px;
            cursor: pointer;
            text-align: center;
            background-color: rgba(249, 249, 249, 1);
            font-size: 15px;
            color: #333;
            display: flex;
            font-weight: 100;
            height: 36px;
            align-items: center;
            justify-content: center;

            &:hover {
              font-weight: 600;
              color: #fff;
              background-color: rgba(159, 159, 159, 1);
            }
          }
        }
      }

      .img12 {
        border-width: 1px;
        border-style: solid;
        border-color: rgba(242, 242, 242, 1);
        width: 193px;
        min-width: 193px;
        margin-right: 30px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;

        & > p:nth-child(2) {
          background-color: #4d4d4d;
          color: rgb(255, 236, 112);
          line-height: 16px;
          font-size: 13px;
          padding: 5px 13px;
          margin-bottom: 6px;
        }

        & > p:nth-child(3) {
          background-color: #4d4d4d;
          color: rgb(255, 236, 112);
          line-height: 16px;
          font-size: 13px;
          padding: 5px 10px;
        }

        img {
          width: 153px;
          height: 158px;
          position: relative;
          top: -10px;
        }
      }

      .table-css {
        position: relative;

        .bz {
          width: 447px;
          height: 63px;
          background: inherit;
          background-color: rgba(255, 221, 202, 1);
          position: absolute;
          right: 0px;
          top: -63px;
          display: flex;
          align-items: center;
          justify-content: center;
          align-items: center;
          justify-content: center;
          flex-wrap: wrap;
          flex-direction: column;

          p {
            width: 100%;
            color: rgb(251, 8, 8);
            font-size: 13px;
            padding-left: 10px;
            margin-bottom: 0px;
            line-height: 16px;
          }
        }
      }

      .btn {

        border-width: 0px;
        width: 112px;
        height: 40px;
        background: inherit;
        background-color: rgba(13, 221, 108, 1);
        border: none;
        border-radius: 3px;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC';
        font-weight: 500;
        font-style: normal;
        font-size: 15px;
        text-align: center;
        display: block;
        color: #fff;
        line-height: 40px;
        margin-top: 25px;
        margin-bottom: 60px;
        cursor: pointer;
      }

      .price {
        color: rgb(38, 38, 38);
        font-size: 16px;
        padding: 2px 2px 2px 24px;
        font-weight: 700;

        span {
          color: rgb(215, 1, 1);
        }

        margin: 35px 0px;
      }

      .price1 {
        color: rgb(38, 38, 38);
        font-size: 16px;
        font-weight: 400;
        padding: 2px 2px 2px 24px;

        span {
          color: rgb(215, 1, 1);
        }

        margin: 35px 0px;
      }

      .text1 {
        width: 533px;
        height: 105px;
        padding: 3px 2px 3px 2px;
        font-family: 'ArialMT', 'Arial';
        font-weight: 400;
        font-style: normal;
        font-size: 13px;
        text-decoration: none;
        letter-spacing: normal;
        color: #000000;
        vertical-align: none;
        text-align: left;
        text-transform: none;
        background-color: #f9f9f9;
        border-color: transparent;
        resize: none;
        outline: none;
        padding: 10px;
      }

      .tabs {
        .tab {
          margin-bottom: 10px;
          display: flex;

          h5 {
            width: 112px;
            padding: 2px 2px 2px 24px;
            background-color: rgba(249, 249, 249, 1);
            font-size: 15px;
            color: #333;
            display: flex;
            height: 36px;
            align-items: center;
            margin: 0px !important;
            margin-right: 6px !important;
          }

          .tab-content {
            height: 36px;
            display: flex;

            p {
              border: 1px solid rgb(242, 242, 242);
              min-width: 100px;
              height: 36px;
              height: 36px;
              display: flex;
              align-items: center;
              justify-content: center;
              padding: 0 15px;
              color: #333;
              font-size: 15px;
              margin-right: 6px;

              cursor: pointer;

              b {
                display: none;
                font-weight: 700;
              }

              &.active {
                color: rgb(255, 236, 112);
                font-weight: 700;
                background-color: rgb(74, 74, 74);
              }

              &:hover {
                b {
                  display: block;
                }

                span {
                  display: none;
                }
              }
            }
          }
        }
      }

      h3.title {
        height: 30px;
        line-height: 30px;
        position: relative;
        font-size: 16px;
        color: #333;
        font-weight: 700;
        margin-bottom: 25px;

        &:after {
          position: absolute;
          height: 100%;
          width: 5px;
          position: absolute;
          left: -35px;
          top: 0px;
          background-color: rgba(74, 74, 74, 1);
          content: "";
        }
      }

      .title2 {
        width: 112px;
        padding: 2px 2px 2px 24px;
        font-size: 15px;
        color: #333;
        display: flex;
        height: 36px;
        align-items: center;
        margin: 0px !important;
        margin-bottom: 10px !important;
        font-weight: 700;
      }

      .list {
        margin-bottom: 20px;

        .list-div {
          display: flex;
          flex-wrap: wrap;

          div {
            width: 33.3%;
            display: flex;
            height: 36px;
            align-items: center;

            p {
              width: 112px;
              padding: 2px 2px 2px 24px;
              background-color: rgba(249, 249, 249, 1);
              font-size: 15px;
              color: #333;
              display: flex;
              height: 36px;
              align-items: center;
              margin: 0px !important;
            }

            span {
              width: calc(100% - 112px);
              padding: 2px 2px 2px 24px;
              font-size: 15px;
              color: #333;
              display: flex;
              height: 36px;
              align-items: center;

              &.b {
                font-weight: 700;
              }
            }
          }
        }
      }
    }
  }

  @import '~@/mixins/zoom.css';
</style>
